const HtmlWebpackPlugin = require('html-webpack-plugin')
// 插件  ==>  生成html
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 插件  ==>  抽离css
module.exports = {
    // 单入口文件
    entry: "./src/index.js",
    // 多入口文件 1 (数组)
    // entry: ['./src/a.js', './src/b.js'],
    // 多入口文件 2 (对象)
    // entry: {
    //     a: "./src/a.js",
    //     b: "./src/b.js"
    // },
    // output: {
    //     path: __dirname + '/dist',
    //     // [path]  [name]  [ext]
    //     filename: '[name].js'
    // },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ],
    },
    devServer: {
        port: 8089
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' }),
        // 抽离css
        new MiniCssExtractPlugin({
            filename: "css/style.css"
        })
    ]
}